<template>
    <div class="Home">
        <el-row>
            <el-col :span="4">
                <div
                    style="height: 50px;display: flex;background-color: var(--menu-top-backgroud-color);padding-left: 26px;position: sticky;top: 0;z-index: 900">
                    <img style="height: 25px;width: 25px;align-self: center" src="../../assets/logo.png"/>
                    <span
                        style="color: #FFFFFF;font-size: 18px;align-self: center;margin-left: 10px">IT培优综合服务平台</span>
                </div>
                <!--左侧菜单栏-->
                <LeftMenu></LeftMenu>
            </el-col>
            <el-col :span="20">
                <!--顶部信息展示-->
                <TopInfo></TopInfo>
                <!--路由的切换区域-->
                <div
                    class="hiddenScrollbar"
                    style="padding: 20px;background-color: var(--change-backgroud-color);height: calc(100vh - 90px);overflow-y: scroll">
                    <el-page-header v-if="routeObj && routeObj.meta.isShowMenu && routeObj.name != 'main'" class="xw-block" @back="$router.go(-1)">
                        <template slot="content">
                            <i :class="routeObj.meta.icon"></i>
                            <span style="margin-left: 5px">{{routeObj.meta.menuName}}</span>
                        </template>
                    </el-page-header>
                    <router-view class="hiddenScrollbar"></router-view>
                </div>

            </el-col>
        </el-row>

    </div>
</template>
<script>
import LeftMenu from "@/components/LeftMenu.vue"
import TopInfo from "@/components/TopInfo.vue"
import "@/assets/css/index.css";

export default {
    data() {
        return {
            routeObj: "",
            user: JSON.parse(localStorage.getItem("user"))
        }
    },
    components: {LeftMenu, TopInfo},
    mounted() {
        this.routeObj = this.$route
        if (!localStorage.getItem("user")) {
            this.$router.push({name: "login"})
        }
    },
    watch: {
        "$route": {
            handler() {
                this.routeObj = this.$route
            }
        }
    }
}
</script>


<style scoped lang="scss">

</style>